<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <crudOperation :permission="permission"></crudOperation>

      </div>
      <el-dialog v-dialog-drag style="width: 80vm" title="搜索"   close-on-click-modal :visible.sync="crud.props.searchToggle"
                 width="70%">
        <el-form size="small" label-width="70px">
          <el-row :gutter="10" class="flex">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="业务日期">
              <div class="flex flex-row">
                <el-date-picker
                  v-model="query.createStartTime"
                  align="right"
                  unlink-panels
                  class="fl1"
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  default-value
                  range-separator=""
                  placeholder="添加开始日期"
                />
                <el-date-picker
                  v-model="query.createEndTime"
                  align="right"
                  unlink-panels
                  class="fl1"
                  format="yyyy - MM - dd "
                  value-format="yyyy-MM-dd"
                  default-value
                  range-separator=""
                  placeholder="添加结束日期"
                />
              </div>
            </el-form-item>
          </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <el-form-item label="客户">
                      <table-select
                        :tableColumns="
                        [
                        {prop:'code',label:'客户编码',width: '100'},
                        {prop:'name',label:'客户名称',width: '150'},
                        {prop:'address',label:'地址'},
                        {prop:'sCustomerName',label:'二批'},
                        ]"
                        labelKey="name"
                        valueKey="id"
                        width="700"
                        :value.sync="query.customerIds"
                        placeholder="请选择客户"
                        url="api/dropDown/basCustomerList"
                      ></table-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row class="flex flex-reverse" >
            <el-button class="filter-item"  size="mini" type="primary" @click="toQuery">搜索</el-button>
            <el-button class="filter-item" plain   size="mini" type="primary"
                       @click="crud.resetQuery" style="margin-right:5px">重置</el-button>
          </el-row>
        </el-form>
      </el-dialog>
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
<!--          <el-form-item label="id">-->
<!--            <el-input v-model="form.id" style="width: 370px" />-->
<!--          </el-form-item>-->
          <el-form-item label="客户编码" prop="customerCode">
            <el-input v-model="form.customerCode" style="width: 370px" />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerName">
            <el-input v-model="form.customerName" style="width: 370px" />
          </el-form-item>
          <el-form-item label="优惠券编码" prop="couponCode">
            <el-input v-model="form.couponCode" style="width: 370px" />
          </el-form-item>
          <el-form-item label="优惠券名称" prop="couponName">
            <el-input v-model="form.couponName" style="width: 370px" />
          </el-form-item>
          <el-form-item label="是否使用(0:否 1:是)">
            <el-input v-model="form.isUse" style="width: 370px" />
          </el-form-item>
          <el-form-item label="系统订单号">
            <el-input v-model="form.outTradeNo" style="width: 370px" />
          </el-form-item>
          <el-form-item label="使用时间">
            <el-input v-model="form.useTime" style="width: 370px" />
          </el-form-item>
          <el-form-item label="领取时间">
            <el-input v-model="form.createTime" style="width: 370px" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        stripe
        border
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column v-if="columns.visible('id')" prop="id" label="id" />
        <el-table-column
          v-if="columns.visible('customerCode')"
          prop="customerCode"
          label="客户编码"
        />
        <el-table-column
          v-if="columns.visible('customerName')"
          prop="customerName"
          label="客户名称"
        />
        <el-table-column
          v-if="columns.visible('couponCode')"
          prop="couponCode"
          label="优惠券编码"
        />
        <el-table-column
          v-if="columns.visible('couponName')"
          prop="couponName"
          label="优惠券名称"
        />
        <el-table-column
          v-if="columns.visible('isUse')"
          prop="isUse"
          label="是否使用(0:否 1:是)"
        />
        <el-table-column
          v-if="columns.visible('outTradeNo')"
          prop="outTradeNo"
          label="系统订单号"
        />
        <el-table-column
          v-if="columns.visible('useTime')"
          prop="useTime"
          label="使用时间"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.useTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('createTime')"
          prop="createTime"
          label="领取时间"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-permission="[
            'admin',
            'activeCustomerCouponRecord:edit',
            'activeCustomerCouponRecord:del',
          ]"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudActiveCustomerCouponRecord from "@/api/erp/activeCustomerCouponRecord";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";

// crud交由presenter持有
const defaultCrud = CRUD({
  title: "客户优惠券领用记录",
  url: "api/activeCustomerCouponRecord",
  sort: "id,desc",
  crudMethod: { ...crudActiveCustomerCouponRecord },
    optShow: {
    isShow: true,
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    enable: false,
    disable: false,
    pass: false,
    reject: false,
    copy: false,
    downloadDetail: false,
    recover: false,//取消作废
    invalid: false,//作废
    print: false, // 打印
    printDetail: false, // 打印详情
    unAccept: false, // 反验收
    accept: false, // 验收
  },
});
const defaultForm = {
  id: null,
  customerId: null,
  couponId: null,
  isUse: null,
  outTradeNo: null,
  useTime: null,
  createTime: null,
};
export default {
  name: "ActiveCustomerCouponRecord",
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ["admin", "activeCustomerCouponRecord:add"],
        edit: ["admin", "activeCustomerCouponRecord:edit"],
        del: ["admin", "activeCustomerCouponRecord:del"],
        import: ["admin", "activeCustomerCouponRecord:import"],
        export: ["admin", "activeCustomerCouponRecord:export"],
        copy: ["admin", "activeCustomerCouponRecord:copy"],
        upload: ["admin", "activeCustomerCouponRecord:upload"],
        download: ["admin", "activeCustomerCouponRecord:download"],
      },
      rules: {
        customerId: [
          { required: true, message: "客户id不能为空", trigger: "blur" },
        ],
        couponId: [
          { required: true, message: "优惠券id不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.crud.props.searchToggle =false
  },
  watch: {},
  methods: {
    toQuery(){
      this.crud.toQuery()
      this.crud.props.searchToggle = false
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {},
  },
};
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.flex{
  flex-wrap: wrap;
}
</style>
